<template>
  <div>
    <div class="loading" v-if="loading">数据加载中…</div>
    <div id="songlist" v-if="!loading">
    <div class="selected">
      <span @click="changeState">{{name}}></span>
      <div class="popup" v-show="isShowPopUp">
        <div
          class="one"
          v-for="(item, index) of selectData.categories"
          :key="index"
        >
          <div class="type">{{ item }}</div>
          <div class="tag">
            <span
              v-for="(i, id) of selectData.sub"
              :key="id"
              @click="add(i.name)"
              v-show="i.category == index"
              >{{ i.name }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="show-content">
      <Repeat :songlist="playlists" :isShow="isShow"></Repeat>
    </div>
  </div>
  </div>
</template>

<script>
import axios from "axios";
import Repeat from "../pages/Repeat.vue";
export default {
  name: "SongList",
  components: { Repeat },
  data() {
    return {
      loading:true,
      isShow:false,
      name: "全部歌单",
      isShowPopUp: false,
      playlists: [],
      selectData: [],
    };
  },
  methods: {
    changeState() {
      this.isShowPopUp = !this.isShowPopUp;
    },
    add(i){
      axios.get("http://localhost:8013/api/top/playlist?cat="+i+"&limit=24").then(
        res=>{
          this.name = i
          this.playlists = res.data.playlists
          this.isShowPopUp = false
        }
      )
    }
  },
  mounted() {
    axios.get("http://localhost:8013/api/playlist/catlist").then((res) => {
      this.selectData = res.data
      console.log(this.selectData);
    });

    axios
      .get("http://localhost:8013/api/top/playlist/highquality")
      .then((res) => {
        this.playlists = res.data.playlists;
        this.loading = false
      });
  },
};
</script>

<style scoped>
#songlist {
  padding-bottom: 80px;
}
.selected {
  height: 25px;
  line-height: 25px;
  border-radius: 20px;
  width: 80px;
  border: 1px solid #888;
  padding: 0px 10px;
  position: relative;
}
.selected span {
  font-size: 15px;
  letter-spacing: 1.1px;
}
.popup {
  text-align: left;
  width: 550px;
  position: absolute;
  top: 30px;
  padding: 10px;
  background: #fff;
  box-shadow: 0px 0px 10px #888;
  z-index: 9;
}
.one {
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.type {
  width: 90px;
  line-height: 37px;
  color: #aaa;
  margin-left: 10px;
}
.tag {
  width: 470px;
}
.tag span {
  display: inline-block;
  padding: 0px 15px 0px 15px;
  margin: 5px 0;
  font-size: 12.5px;
  border-radius: 20px;
}
.tag span:hover {
  cursor: pointer;
  color: rgb(70, 192, 14);
  background: rgb(203, 203, 255);
}
.show-content {
  margin-top: 20px;
  line-height: 20px;
}
</style>